<div class="bg">
  <div class="panel-commarkethome">
    <div class="bd df jcsb aic">
      <div class="lt df asfe">
        <div class="r df jcsb">
          <span
            *ngFor="let item of muLists; let i = index"
            (click)="setOnMu(item)"
            [ngClass]="{
              on: item.symbol === onMu.symbol,
              love: item.symbol === 'love'
            }"
          >
            <!--
                  <i
                    style="margin-right:6px"
                    :class="['token-logo', 'default-icon', `${item.symbol}`]"
                  ></i>
                -->
            <a
              [innerHTML]="
                item.symbol === 'love'
                  ? ('App.love' | translate: lang)
                  : item.symbol
              "
            ></a>
            <div class="line"></div>
          </span>
        </div>
      </div>
      <div class="rt">
        <div class="eh-search">
          <input
            placeholder="Find..."
            maxlength="7"
            type="text"
            style="width:188px;"
            [formControl]="search$"
            (input)="onInputSearch($event)"
          />
          <i style="right: 10px;" class="icon iconfont">&#xe606;</i>
        </div>
      </div>
    </div>
    <div class="ft">
      <div class="h df jcsb">
        <span class="df  paris"
          >{{ "i18n.market.pairs" | translate: lang }}
          <!--
                <div class="arrow">
                  <div class="u">
                      <TIconArrow :on="onSort.type == 'symbol' && onSort.sort=='asc'" turn='up' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                  <div class="d">
                      <TIconArrow :on="onSort.type == 'symbol' && onSort.sort=='desc'" turn='down' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                </div>
              -->
        </span>
        <span class="df jcfe lastPrice"
          >{{ "i18n.market.lastPrice" | translate: lang }}
          <!--
                <div class="arrow">
                  <div class="u">
                      <TIconArrow :on="onSort.type == 'symbol' && onSort.sort=='asc'" turn='up' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                  <div class="d">
                      <TIconArrow :on="onSort.type == 'symbol' && onSort.sort=='desc'" turn='down' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                </div>
              -->
        </span>
        <span class="df jcfe change"
          >{{ "i18n.market.change" | translate: lang }}
          <!--
                <div class="arrow">
                  <div class="u">
                      <TIconArrow :on="onSort.type == 'symbol' && onSort.sort=='asc'" turn='up' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                  <div class="d">
                      <TIconArrow :on="onSort.type == 'symbol' && onSort.sort=='desc'" turn='down' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                </div>
              -->
        </span>
        <span class="df jcfe high"
          >{{ "i18n.market.high" | translate: lang }}
          <!--
                <div class="arrow">
                  <div class="u">
                      <TIconArrow :on="onSort.type == 'lastPrice' && onSort.sort=='asc'" turn='up' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                  <div class="d">
                      <TIconArrow :on="onSort.type == 'lastPrice' && onSort.sort=='desc'" turn='down' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                </div>
              -->
        </span>
        <span class="df jcfe low"
          >{{ "i18n.market.low" | translate: lang }}
          <!--
                <div class="arrow">
                  <div class="u">
                      <TIconArrow :on="onSort.type == 'change' && onSort.sort=='asc'" turn='up' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                  <div class="d">
                      <TIconArrow :on="onSort.type == 'change' && onSort.sort=='desc'" turn='down' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                </div>
              -->
        </span>
        <span class="df jcfe vol"
          >{{ "i18n.market.v" | translate: lang }}
          <!--
                <div class="arrow">
                  <div class="u">
                      <TIconArrow :on="onSort.type == 'change' && onSort.sort=='asc'" turn='up' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                  <div class="d">
                      <TIconArrow :on="onSort.type == 'change' && onSort.sort=='desc'" turn='down' :tstyle='{fill:"#7D86AC",width:"20px",height:"20px"}' />
                  </div>
                </div>
              -->
        </span>
      </div>
      <div class="b" data-scrollbar>
        <div>
          <div
            class="r df jcsb"
            (click)="toOnZi(item)"
            *ngFor="let item of (ziLists$ | async); let i = index"
          >
            <div class="i pairs">
              <span>
                <!--
                      <TIconStar v-show="item.isLove ? false:true"
                                 style="vertical-align:-2px"
                                 ttype="empty"
                                 :tstyle='{fill:"#7D86AC",widht:"13px",height:"13px"}' />
                      <TIconStar v-show="item.isLove ? true:false"
                                 style="vertical-align:-2px"
                                 ttype="solid"
                                 :tstyle='{fill:"#5693FF",widht:"13px",height:"13px"}' />
                    -->
              </span>
              <span>
                <i class="token-logo default-icon"></i>{{ item.symbol }}</span
              >
              <font *ngIf="onMu.symbol !== 'love'">/{{ onMu.symbol }}</font>
            </div>
            <div class="i df jcfe lastPrice">{{ item.lastPrice }}</div>
            <div
              class="i df jcfe  change"
              appChange
              [val]="item.change"
              v-change="item.change"
              v-toFixed="{val:item.change,point:2,isPercent:true}"
            >
              {{ item.change }}
            </div>
            <div class="i df jcfe  high">{{ item.h }}</div>
            <div class="i df jcfe  low">{{ item.l }}</div>
            <div class="i df jcfe  vol">{{ item.v }}</div>
          </div>
        </div>
      </div>
      <div class="f">
        <mat-paginator
          [length]="0"
          [pageSize]="10"
          [pageSizeOptions]="[5, 10, 25, 100]"
        >
        </mat-paginator>
      </div>
    </div>
  </div>
</div>
